<template>
  <div class="screen-root">
    <div class="screen" id="screen">
      <div class="header">
        <h1>数据可视化平台</h1>
      </div>
      <div class="container">
        <div class="top">
          <div class="one">
            <div id="bookChart" class="echarts-chart"></div>
          </div>
          <div class="one">
            <div id="timeChart" class="echarts-chart"></div>
          </div>
          <div class="one">
            <div id="TimeChart" class="echarts-chart"></div>
          </div>
        </div>
        <div class="footer">
          <div class="two">
            <div id="TextChart" class="echarts-chart"></div>
          </div>
          <div class="two">
            <div id="Dynamic" class="echarts-chart"></div>
          </div>
          <div class="two">
            <div id="zhuzhuang" class="echarts-chart"></div>
          </div>
          <div class="two">
            <div id="lastone" class="echarts-chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    this.handleScreenAuto()
    window.onresize = () => {
      this.handleScreenAuto()
      if (this.myChart) {
        this.myChart.resize()
      }
    }
    this.initBookChart('bookChart')
    this.initTimeChart('timeChart')
    this.inittimeChart('TimeChart')
    this.initDynamichart('Dynamic')
    this.initzhuzhuangChart('zhuzhuang')
    this.initlastoneChart('lastone')
    this.initTextChart('TextChart')
  },
  beforeUnmount() {
    window.onresize = null
    if (this.myChart) {
      this.myChart.dispose()
      this.myChart = null
    }
  },
  data() {
    return {
      chartInstances: {},
    }
  },
  methods: {
    handleScreenAuto() {
      const designDraftWidth = 1920
      const designDraftHeight = 1080
      const scale =
        document.documentElement.clientWidth / document.documentElement.clientHeight <
        designDraftWidth / designDraftHeight
          ? document.documentElement.clientWidth / designDraftWidth
          : document.documentElement.clientHeight / designDraftHeight
      document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%, -50%)`
    },
    initBookChart(chartId) {
      const chartDom = document.getElementById('bookChart')
      if (chartDom) {
        const myChart = echarts.init(chartDom, 'dark')
        this.chartInstances[chartId] = myChart
        const data = genData(50)
        const option = {
          title: {
            // text: '同名数量统计',
            // subtext: '纯属虚构',
            // left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            show: true,
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,
            textStyle: { color: '#fff' },
          },
          series: [
            {
              name: '姓名',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: data.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
              label: {
                textStyle: { color: '#fff' }, // 饼图标签文字设为白色
              },
            },
          ],
        }

        function genData(count) {
          // prettier-ignore
          const nameList = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许'];
          const legendData = []
          const seriesData = []
          for (var i = 0; i < count; i++) {
            var name = Math.random() > 0.65 ? makeWord(4, 1) + '·' + makeWord(3, 0) : makeWord(2, 1)
            legendData.push(name)
            seriesData.push({
              name: name,
              value: Math.round(Math.random() * 100000),
            })
          }

          return {
            legendData: legendData,
            seriesData: seriesData,
          }

          function makeWord(max, min) {
            const nameLen = Math.ceil(Math.random() * max + min)
            const name = []
            for (var i = 0; i < nameLen; i++) {
              name.push(nameList[Math.round(Math.random() * nameList.length - 1)])
            }
            return name.join('')
          }
        }
        myChart.setOption(option)
      }
    },
    initTimeChart(chartId) {
      const chartDom = document.getElementById('timeChart')
      if (this.myChart) {
        this.myChart.dispose()
      }
      const myChart = echarts.init(chartDom, 'dark')
      this.chartInstances[chartId] = myChart
      const option = {
        title: {
          text: 'Stacked Line',
          textStyle: { color: '#fff' },
        },
        tooltip: {
          trigger: 'axis',
          show: true,
          axisPointer: { type: 'line' },
          textStyle: { color: '#000' },
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
          textStyle: { color: '#fff' },
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '15%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          iconStyle: { color: '#fff' },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: { color: '#fff' },
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#fff' },
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    inittimeChart(chartId) {
      const chartDom = document.getElementById('TimeChart')
      if (this.myChart) {
        this.myChart.dispose()
      }
      const myChart = echarts.init(chartDom, 'dark')
      this.chartInstances[chartId] = myChart
      const option = {
        title: {
          text: 'Line',
          textStyle: { color: '#fff' },
        },
        tooltip: {
          trigger: 'axis',
          show: true,
          axisPointer: { type: 'line' },
          textStyle: { color: '#000' },
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
          textStyle: { color: '#fff' },
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '15%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          iconStyle: { color: '#fff' },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: { color: '#fff' },
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#fff' },
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    initTextChart(chartId) {
      const chartDom = document.getElementById('TextChart')
      const myChart = echarts.init(chartDom, 'dark')
      this.chartInstances[chartId] = myChart
      const option = {
        title: {
          text: 'Multiple Radar',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: 'center',
          data: ['A Software', 'A Phone', 'Another Phone', 'Precipitation', 'Evaporation'],
        },
        radar: [
          {
            indicator: [
              { text: 'Brand', max: 100 },
              { text: 'Content', max: 100 },
              { text: 'Usability', max: 100 },
              { text: 'Function', max: 100 },
            ],
            center: ['25%', '40%'],
            radius: 80,
          },
          {
            indicator: [
              { text: 'Look', max: 100 },
              { text: 'Photo', max: 100 },
              { text: 'System', max: 100 },
              { text: 'Performance', max: 100 },
              { text: 'Screen', max: 100 },
            ],
            radius: 80,
            center: ['50%', '60%'],
          },
          {
            indicator: (function () {
              var res = []
              for (var i = 1; i <= 12; i++) {
                res.push({ text: i + '月', max: 100 })
              }
              return res
            })(),
            center: ['75%', '40%'],
            radius: 80,
          },
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item',
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 40],
                name: 'A Software',
              },
            ],
          },
          {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
              {
                value: [85, 90, 90, 95, 95],
                name: 'A Phone',
              },
              {
                value: [95, 80, 95, 90, 93],
                name: 'Another Phone',
              },
            ],
          },
          {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
              {
                name: 'Precipitation',
                value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
              },
              {
                name: 'Evaporation',
                value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3],
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    initDynamichart(chartId) {
      const chartDom = document.getElementById('Dynamic')
      const myChart = echarts.init(chartDom, 'dark')
      this.chartInstances[chartId] = myChart
      const app = { count: 11 }
      const categories = (function () {
        let now = new Date()
        let res = []
        let len = 10
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
          now = new Date(+now - 2000)
        }
        return res
      })()
      const categories2 = (function () {
        let res = []
        let len = 10
        while (len--) {
          res.push(10 - len - 1)
        }
        return res
      })()
      const data = (function () {
        let res = []
        let len = 10
        while (len--) {
          res.push(Math.round(Math.random() * 1000))
        }
        return res
      })()
      const data2 = (function () {
        let res = []
        let len = 0
        while (len < 10) {
          res.push(+(Math.random() * 10 + 5).toFixed(1))
          len++
        }
        return res
      })()
      const option = {
        title: {
          text: 'Dynamic Data',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56',
            },
          },
        },
        legend: { data: ['Dynamic Bar', 'Dynamic Line'] },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: categories,
          },
          {
            type: 'category',
            boundaryGap: true,
            data: categories2,
          },
        ],
        yAxis: [
          {
            type: 'value',
            // scale: true,
            name: 'Price',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
          {
            type: 'value',
            // scale: true,
            name: 'Order',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
        ],
        series: [
          {
            name: 'Dynamic Bar',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data,
          },
          {
            name: 'Dynamic Line',
            type: 'line',
            data: data2,
          },
        ],
      }
      this.timer = setInterval(() => {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
        data.shift()
        data.push(Math.round(Math.random() * 1000))
        data2.shift()
        data2.push(+(Math.random() * 10 + 5).toFixed(1))
        categories.shift()
        categories.push(axisData)
        categories2.shift()
        categories2.push(app.count++)
        myChart.setOption({
          xAxis: [
            {
              data: categories,
            },
            {
              data: categories2,
            },
          ],
          series: [
            {
              data: data,
            },
            {
              data: data2,
            },
          ],
        })
      }, 1100)
      myChart.setOption(option)
    },
    initzhuzhuangChart(chartId) {
      const chartDom = document.getElementById(chartId)
      const myChart = echarts.init(chartDom, 'dark')
      this.chartInstances[chartId] = myChart
      var data = [
        {
          name: '一月',
          value: 80,
        },
        {
          name: '二月',
          value: 87.8,
        },
        {
          name: '三月',
          value: 71,
        },
        {
          name: '四月',
          value: 80,
        },
        {
          name: '五月',
          value: 66,
        },
        {
          name: '六月',
          value: 80,
        },
        {
          name: '七月',
          value: 80,
        },
      ]
      var xData = [],
        yData = []
      var min = 50
      data.map(function (a, b) {
        xData.push(a.name)
        if (a.value === 0) {
          yData.push(a.value + min)
        } else {
          yData.push(a.value)
        }
      })
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              opacity: 0,
            },
          },
          formatter: function (prams) {
            if (prams[0].data === min) {
              return '合格率：0%'
            } else {
              return '合格率：' + prams[0].data + '%'
            }
          },
        },
        legend: {
          data: ['直接访问', '背景'],
          show: false,
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '7%',
          height: '85%',
          containLabel: true,
          z: 22,
        },
        xAxis: [
          {
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: '#0c3b71',
              },
            },
            axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize: 16,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            gridIndex: 0,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            min: min,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#0c3b71',
              },
            },
            axisLabel: {
              color: 'rgb(170,170,170)',
              formatter: '{value} %',
            },
          },
          {
            type: 'value',
            gridIndex: 0,
            min: min,
            max: 100,
            splitNumber: 12,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
              },
            },
          },
        ],
        series: [
          {
            name: '合格率',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00feff',
                  },
                  {
                    offset: 0.5,
                    color: '#027eff',
                  },
                  {
                    offset: 1,
                    color: '#0286ff',
                  },
                ]),
              },
            },
            data: yData,
            zlevel: 11,
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: '50%',
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: '-135%',
            data: [100, 100, 100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: 'rgba(255,255,255,0.1)',
              },
            },
            zlevel: 9,
          },
        ],
      }
      myChart.setOption(option)
    },
    initlastoneChart(chartId) {
      const chartDom = document.getElementById(chartId)
      const myChart = echarts.init(chartDom, 'dark')
      this.chartInstances[chartId] = myChart
      const option = {
        title: {
          text: '自定义的折柱混合--BarLine',
          left: 'center',
          y: '10',
          textStyle: {
            color: '#fff',
          },
        },
        color: '#384757',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#384757',
            },
          },
        },
        legend: {
          data: [
            {
              name: '待处理',
              icon: 'circle',
              textStyle: {
                color: '#7d838b',
              },
            },
            {
              name: '已处理',
              icon: 'circle',
              textStyle: {
                color: '#7d838b',
              },
            },
            {
              name: '完成率',
              icon: 'circle',
              textStyle: {
                color: '#7d838b',
              },
            },
          ],
          top: '10%',
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: [
          {
            type: 'category',
            data: ['1街', '2街', '3街', '4街', '5街', '6街'],
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7d838b',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '不文明现象',
            nameTextStyle: {
              color: '#7d838b',
            },
            min: 0,
            max: 50,
            interval: 10,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7d838b',
              },
            },
            axisLine: {
              show: true,
            },
            splitLine: {
              lineStyle: {
                color: '#7d838b',
              },
            },
          },
          {
            type: 'value',
            name: '完成率',
            show: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7d838b',
              },
            },
          },
        ],
        grid: {
          top: '20%',
        },
        series: [
          {
            name: '待处理',
            type: 'bar',
            data: [4, 6, 36, 6, 8, 6],
            barWidth: 'auto',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255,37,117,0.7)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(0,133,245,0.7)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,133,245,0.3)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
          },
          {
            name: '已处理',
            type: 'bar',
            data: [4, 2, 36, 6, 8, 6],
            barWidth: 'auto',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255,37,117,0.7)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(0,255,252,0.7)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,255,252,0.3)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            barGap: '0',
          },
          {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            data: [100, 33, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: '#ffaa00',
              },
            },
            smooth: true,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100vw;
  background-image: url(@/assets/bg.jpeg);
  overflow: hidden;
}
.screen-root {
  height: 100%;
  width: 100%;
  .screen {
    display: inline-block;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #0f172a;
  }
}
.header {
  width: 100%;
  height: 5%;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.container {
  width: 100%;
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 20px;
}
.top {
  width: 100%;
  height: 33.33%;
  display: flex;
  justify-content: space-evenly;
}
.footer {
  width: 100%;
  height: 66.66%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.one {
  width: 33.33%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background-color: rgba(30, 41, 59, 0.6);
}
.two {
  width: 48%;
  height: 49%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background-color: rgba(30, 41, 59, 0.6);
}
.echarts-chart {
  width: 100%;
  height: 100%;
}
</style>
